<template>
    <div>
        <NavBar :title="title"></NavBar>
        <div v-for="item in cartData">
            <van-swipe-cell>
                <van-card :price="item.goods.goods_price" :title="item.goods.goods_name">
                    <template #thumb>
                        <div style="display: flex;">
                            <van-checkbox v-model="item.checked"></van-checkbox>
                            <img :src="item.goods.goods_small_logo ? item.goods.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                                alt="" style="width: 70px;
                        height: 70px;">
                        </div>
                    </template>
                    <template #num>
                        <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="cartpart(item.id)"
                        style="margin-left: 2px;" />
                </template>
            </van-swipe-cell>

        </div>
        <van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="allchecked">全选</van-checkbox>
        </van-submit-bar>

    </div>
</template>

<script setup>
import NavBar from '@/components/NavBar.vue';
const title = '购物车'
import { computed, ref } from 'vue';
import { useCounterStore } from '@/stores/counter'
import { get } from 'vant/lib/utils';
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
const cartData = ref([])
const cart = () => {
    cartData.value = store.counter
}
cart()
const cartpart = (id) => {
    console.log(id);
    store.counter = store.counter.filter(item => item.id != id)
    cart()
}
const allprice = computed(() => {
    let allprice = ref(0)
    let cartok = cartData.value.filter(item => item.checked == true)
    cartok.find(item => allprice.value += item.number * item.goods.goods_price)
    return allprice.value * 100
})
// const allchecked =()=>{
//     let cartok = cartData.value.filter(item => item.checked == true)
//      get()(

//      )
//     set(val)(
//  cartData.value.forEach(item => item.checked == val)
//     )
// }
console.log(store.counter);

import { showSuccessToast, showFailToast } from 'vant';
import { createApi } from '@/api/api';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
const onSubmit = () => {
    let cartok = cartData.value.filter(item => item.checked == true)
    if (cartok.length == 0) {
        showFailToast('请选择商品');
    } else {
console.log(cartok);
// cartok.map(cartData.value.goods).join(',')
// cartok.map(cartok.number).join(',')
        createApi({
            goodsIds:'51825',
            username:localStorage.getItem('username'),
            product_code:allprice.value/100,
            totalPrice:'123456',
            nums:'1',
        }).then(res => {
            console.log(res);
            showSuccessToast('订单OK');
            router.push('/order/' + res.data.data.orderId)
        })
    }
}
</script>

<style lang="scss" scoped>
.delete-button {
    height: 100%;
}
</style>